<template>
    <div class="edu-page-warp">
        <inner-breadcrumb v-model="pathKey" :path="path"></inner-breadcrumb>
        <template v-if="pathKey=='main'">
            <condition-card @reset="reset" @search="onSubmit">
                <el-row :gutter="24">
                    <!-- <el-col :span="8">
                        <el-form-item :label="$t('teachers.nationalityLabel')">
                            <el-select v-model="queryForm.country" filterable style="width: 100%">
                                <el-option v-for="item in options.country" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item :label="$t('teachers.facultyLabel')">
                            <el-select v-model="queryForm.faculty" filterable style="width: 100%">
                                <el-option v-for="item in options.faculty" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('teachers.approvalStatus')">
                            <el-select v-model="queryForm.approvalStatus" filterable style="width: 100%">
                                <el-option v-for="item in options.approvalStatus" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item :label="$t('teachers.titleLabel')">
                            <el-select v-model="queryForm.title" filterable style="width: 100%">
                                <el-option v-for="item in options.title" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <!-- <el-row :gutter="24"> -->
                    <!-- <el-col :span="8">
                        <el-form-item :label="$t('teachers.teachQualLabel')">
                            <el-select v-model="queryForm.teachQual" style="width: 100%">
                                <el-option v-for="item in options.teachQual" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                <!-- </el-row> -->
            </condition-card>
            <el-card shadow="never">
                <div class="edu-page-title" style="margin-bottom: 24px;">{{$t('teachers.approveInSchool')}}</div>
                <div class="edu-opertion-bar" style="margin-bottom: 16px;">
                    <div class="float-left">
                        <el-input v-model="queryForm.condition" :placeholder="$t('common.pla.teacherNameCode')" style="width:200px"
                            @keyup.enter.native="onSubmit">
                            <i class="el-icon-search" slot="suffix" style="margin-top:10px;cursor:pointer" @click="onSubmit"></i>
                        </el-input>
                    </div>
                    <div class="float-right">
                        <el-button type="primary" @click="exportApprove">{{$t("message.export")}}</el-button>
                        <!--试听计划只有教务员有权限-->
                        <el-button v-if="global.isAcdemicDean" type="primary" @click="openTryListenDialog">{{$t('teachers.pgAuditionPlan')}}</el-button>
                    </div>
                </div>
                <el-table stripe :data="viewData" size="mini" width="100%" @selection-change="chooseTeacher"
                  tooltip-effect="light">
                  <edu-table-column type="selection" width="30" fixed></edu-table-column>
                  <edu-table-column :label="$t('message.order')" type="index" align="center" width="60" fixed/>
                  <edu-table-column prop="code" :label="$t('courseArrange.preArrangeLog.code')" width="90" fixed/>
                  <edu-table-column prop="name" :label="$t('teachers.teacherName')" width="80" fixed>
                    <template slot-scope="scope">
                      <el-button @click="handleNameClick(scope.row)" type="text">{{scope.row.name}}</el-button>
                    </template>
                  </edu-table-column>
                  <edu-table-column prop="sexI18n" :label="$t('teachers.genderLabel')" width="50"/>
                  <edu-table-column prop="facultyI18n" :label="$t('teachers.facultyLabel')" width="150"/>
                  <!-- <edu-table-column :label="$t('teachers.applicationAuthorized')" :render-header="labelHead" min-width="120">
                    <template slot-scope="scope">
                      {{getApplyType(scope.row.teachQual)}}
                    </template>
                  </edu-table-column> -->
                  
                  <!-- <edu-table-column :label="$t('teachers.auditionTime')" prop="auditionTime" min-width="150" /> -->
                  <edu-table-column :label="$t('teachers.auditionTime')" width="150">
                    <template slot-scope="scope">
                        {{ scope.row.auditionTime | formatDate }}
                    </template>
                </edu-table-column>
                  <edu-table-column :label="$t('teachers.auditionPlace')" prop="auditionAddress" min-width="100"/>
                  <edu-table-column :label="$t('message.status')" width="70">
                    <template slot-scope="props">
                      <el-tag v-if="props.row.approvalStatus==2" type="info" size="mini">{{ $t('teachers.entered') }}</el-tag>
                      <el-tag v-if="props.row.approvalStatus==3" type="info" size="mini">{{ $t('message.checkPending') }}</el-tag>
                      <el-tag v-if="props.row.approvalStatus == 4" type="success">{{ $t('message.pass') }}</el-tag>
                      <el-tag v-if="props.row.approvalStatus == 0" type="danger">{{ $t('message.reject') }}</el-tag>
                    </template>
                  </edu-table-column>
                  <edu-table-column :label="$t('message.operating')" width='90' fixed="right">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.approvalStatus === '2' || scope.row.approvalStatus=== '3'" type="text" size="mini"
                            @click="check(scope.row)">{{$t("message.check")}}</el-button>
                        <el-button v-else type="text" size="mini"
                            @click="detail(scope.row)">{{$t("message.Look")}}</el-button>
                        <el-button v-if="scope.row.approvalStatus !== '4'" type="text" @click="del(scope.row.id)">{{$t('message.delete')}}</el-button>
                    </template>
                  </edu-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_" :page-sizes="[20,50,100,500,1000]" :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total_" style="float:right;margin-top:10px"></el-pagination>
                    </el-col>
                </el-row>
            </el-card>

            <el-dialog :visible.sync="examineVisible" class="teacher-info" :before-close="handleClose" width="1000px" v-drag-dialog>
                <div slot="title">
                    <span style="font-size: 18px">{{$t('teachers.teacherInfo')}}</span>
                    &nbsp;&nbsp;
                    <i class="el-icon-warning" style="color: #C0C4CC"></i>
                    <span style="font-size: 12px;color: #C0C4CC">&nbsp;&nbsp;{{$t('teachers.changeMessage')}}</span>
                </div>
                <DetailInfoComponent :teacher-info="teacherInfo"></DetailInfoComponent>
            </el-dialog>

            <el-dialog :visible.sync="showTryListenDialog" :title="$t('teachers.pgAuditionPlan')" width="50%" v-drag-dialog @close="clearPostForm">
                <el-form :model="postForm" label-position="right" label-width="100px" :rules="rules" ref="postForm"
                    label-suffix="："
                >
                    <el-row>
                        <el-col :offset="1" :span="20">
                            <el-form-item :label="$t('teachers.auditionTime')" prop="auditionTime">
                                <el-date-picker
                                    v-model="postForm.auditionTime"
                                    type="datetime"
                                    :placeholder="$t('teachers.plsChooseDate')"
                                    style="width: 80%"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :offset="1" :span="20">
                            <el-form-item
                                :label="$t('teachers.auditionPlace')"
                                prop="auditionAddress"
                            >
                                <el-input
                                    type="textarea"
                                    :rows="5"
                                    style="width: 80%"
                                    v-model="postForm.auditionAddress"
                                ></el-input>
                                <span style="color: red;font-size: smaller;display: block;">* {{$t('teachers.arrangeTips')}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 24px;">
                        <el-col :span="24">
                            <div class="float-right">
                                <el-button @click="cancel">{{$t("message.cancel")}}</el-button>
                                <el-button type="primary" @click="save">{{$t("message.confirm")}}</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
        </template>
        <!-- 审批组件 -->
        <TeachingApproveComponent v-if="pathKey ==='approve'||pathKey ==='detail'" :dataInfo="dataInfo" :detailFlag="detailFlag" @back="pathKey='main'" ref="approveRoll"/>
    </div>
</template>
<script>
import * as API from "common/src/api/resource/pgTeacher";
import { queryDic } from "common/src/api/dictionary";
import { selectClassRoomStage } from "common/src/api/resource/classroom";
import UTILS from "common/src/utils/utils";
import filters from "common/src/filters";
import DetailInfoComponent from "./componet/DetailInfoComponent";
import TeachingApproveComponent from "./componet/TeachingApproveComponent";
import commonMixins from 'common/src/views/practiceManagement/commonMixins';
import moment from 'moment';
import mixin from 'common/src/mixins/index';

export default {
    name: "",
    mixins: [commonMixins,mixin],
    components: {
        DetailInfoComponent,
        TeachingApproveComponent
    },
    data() {
        return {
            pathKey: "main",
            currentManageDptId:'',
            dataInfo:{},
            path: {
                label: this.$t("teachers.onCampusApprove"),
                key: "main",
                children: [
                    {
                        label: this.$t("teachers.approveDetail"),
                        key: "approve"
                    }
                ]
            },
            queryForm: {
                country: "", //* 国籍
                faculty: "", //* 学院
                title: "", //* 职称
                teachQual: "", //* 教师授课资格
                condition: "",
                approvalStatus:"",
                pageNum_: 0,
                pageSize_: 20,
                total_: 0
            },
            postForm: {
                auditionTime: "",
                auditionAddress: ""
            },
            options: {
                faculty: [],
                title: [],
                country: [],
                teachQual: [],
                campus: [],
                approvalStatus: [
                    {
                        label: this.$t('teachers.entered'),
                        value: '2',
                        type: 'info'
                    },
                    {
                        label: this.$t('message.checkPending'),
                        value: '3',
                        type: 'info'
                    },
                    {
                        label: this.$t('teachers.notPass'),
                        value: '0',
                        type: 'danger'
                    },
                    {
                        label: this.$t('teachers.adopt'),
                        value: '4',
                        type: 'success'
                    }
                ]
            },
            rules: {
                auditionTime: [
                    {
                        required: true,
                        message: this.$t("teachers.plsInputAuditionTime"),
                        trigger: "blur"
                    }
                ],
                auditionAddress: [
                    {
                        required: true,
                        validator: this.validateInput,
                        trigger: 'blur'
                    },
                    { max: 200, message: this.$t("teachers.maximum"), trigger: 'blur' }
                ]
            },
            showTryListenDialog: false,
            viewData: [],
            chooseTeachers: [],
            examineVisible: false,
            classRooms: [],
            detailFlag:false,
            defaultFaculty: ''
        };
    },
    mounted: function() {
        let user = this.global.currentUser;
        this.currentManageDptId = user.currentManageDptId ? user.currentManageDptId:user.manageDptIds[0];
        this.init();
    },
    watch: {
        pathKey(val) {
            if (val == "main") {
                this.onSubmit();
            }
        }
    },
    filters: {
      formatDate(val) {
          if(val){              
              let time = moment(val).toDate();
              return filters.formatDate(time, "yyyy-MM-dd hh:mm");
          }
          return val;
      }
    },
    methods: {
        init() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX", "profession", "G_GJQU", "X_XQ"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    // this.fillSelect(res.data);
                    UTILS.fillSelect(
                        {
                            faculty: "X_YX",
                            title: "profession",
                            country: "G_GJQU",
                            campus: "X_XQ"
                        },
                        res.data,
                        this.options
                    );
                    if(this.global.isAcdemicDean){
                        this.options.faculty.push( {
                            label: this.$t("teachers.otherFaculty"),
                            value: "other"
                        })
                    }
                    // this.defaultFaculty = this.options.faculty[0]
                    // this.queryForm.faculty = this.defaultFaculty
                }
            });
            const yes = {
                label: this.$t("teachers.underTeachQualLabel"),
                value: "1"
            };
            const no = {
                label: this.$t("teachers.postTeachQualLabel"),
                value: "2"
            };
            const onjob = {
                label: this.$t("teachers.postTeachQualOnjob"),
                value: "3"
            };
            switch(this.currentManageDptId){
                case '1':
                    this.options.teachQual.push(yes);
                    break;
                case '2':
                    this.options.teachQual.push(no);
                    break;
                case '4':
                    this.options.teachQual.push(onjob);
                    break;
                default:
            }
            if(this.global.isAnyTeacher){
                this.options.teachQual = [];
                this.options.teachQual.push(yes, no,onjob);
            }
            this.onSubmit();
        },
        onSubmit() {
            this.getDataList();
        },
        reset() {
            this.queryForm.approvalStatus = "";
            this.queryForm.faculty = "";
            // this.queryForm.faculty = this.defaultFaculty;
            this.queryForm.condition = "";
            this.onSubmit();
        },
        getDataList(isFirstPage = true) {
            if (isFirstPage) {
                this.queryForm.pageNum_ = 1;
            }
            API.approvalList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.viewData = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getDataList();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getDataList(false);
        },
        openTryListenDialog() {
            if (this.chooseTeachers.length == 0) {
                 this.$noSelectAlert();
                return;
            }
            if (
                this.chooseTeachers.some(
                    c => c.approvalStatus != 2 && c.approvalStatus != 3
                )
            ) {
                this.$message({
                    type: "info",
                    message: this.$t("teachers.tipsMsg")
                });
                return;
            }
            if (this.$refs.postForm) this.$refs.postForm.resetFields();
            this.showTryListenDialog = true;
        },
        cancel() {
            this.showTryListenDialog = false;
        },
        save() {
            this.$refs.postForm.validate(valid => {
                if (!valid) {
                    return;
                }
                this.postForm.ids = this.chooseTeachers.map(c => c.applyId);
                API.setTryListen(this.postForm).then(res => {
                	if (res.code == 200) {
                		this.showTryListenDialog = false;
                		this.onSubmit();
                	}
                });
           });
        },
        chooseTeacher(val) {
            this.chooseTeachers = val;
        },
        getApplyType(val) {
            let obj = this.options.teachQual.find(c => c.value == val);
            if (obj) {
                return obj.label;
            } else {
                return "";
            }
        },

        check(row) {
            if(row.approvalStatus === '2'){
                this.$message({
                    message: this.$t('teachers.auditionNotEntered'),
                    type: 'warning'
                })
                return
            }
            this.dataInfo = row || {};
            this.pathKey = "approve";
            this.detailFlag = false
        },
        detail(row){
            this.dataInfo = row || {};
            this.pathKey = "detail";
            this.detailFlag = true
        },
        exportApprove() {
            let data = _.cloneDeep(this.queryForm);
            data.ids = this.chooseTeachers.map(c => c.applyId);
            API.exportApproveTeacher(data);
        },
        handleNameClick(row) {
            API.findTeacherBycode(row.code).then(res => {
                if (res.code == 200) {
                    this.teacherInfo = res.data;
                    this.getCard(this.teacherInfo)
                    this.examineVisible = true;
                }
            });
        },
        //列表身份证标识转换
        getCard(row) {
            row.cardLable = row.card;
            if(row.card && row.card.length > 10){
                row.cardLable = row.card.slice(row.card.length - 10,row.card.length);
            }
            return row.cardLable;
        },

        labelHead(h, { column, $index }) {
            return h("span", { attrs: { title: column.label } }, [
                column.label
            ]);
        },
        clearPostForm() {
            if (this.$refs.postForm) this.$refs.postForm.clearValidate();
            this.postForm.auditionTime = "";
            this.postForm.temp = [];
        },
        del(id) {
            this.$confirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt'), {
                confirmButtonText: this.$t('message.confirm'),
                cancelButtonText: this.$t('message.cancel'),
                type: "warning"
            }).then(() => {
                API.deleteApply(id).then(res => {
                    if (res && res.code !== 200) {
                        this.$message({ message: res.msg, type: 'warning' });
                        return;
                    }
                    this.getDataList();
                    this.$message({ type: 'success', message: this.$t('message.deleteSuccess') });
                });
            });
        }
    }
};
</script>
<style lang="scss" scoped>
</style>
